import React from 'react';

import SvgIcon from '@/components/SvgIcon';

interface AudioControlsProps {
	isRecording: boolean;
	onStartRecording: () => void;
	onStopRecording: () => void;
	onUploadFile: () => void;
	className?: string;
}

const AudioControls: React.FC<AudioControlsProps> = ({
	isRecording,
	onStartRecording,
	onStopRecording,
	onUploadFile,
	className = ''
}) => {
	const handleRecordClick = () => {
		if (isRecording) {
			onStopRecording();
		} else {
			onStartRecording();
		}
	};

	return (
		<div className={`absolute right-2 bottom-4 flex-center ${className}`}>
			<SvgIcon
				localIcon={isRecording ? 'icon-recording-stop' : 'icon-recording'}
				onClick={handleRecordClick}
				className={`mr-1 text-5 cursor-pointer ${isRecording ? 'color-[red]' : ''}`}
			/>
			<SvgIcon
				localIcon="icon-cloud"
				onClick={onUploadFile}
				className="mr-1 text-6 cursor-pointer"
			/>
		</div>
	);
};

export default AudioControls;
